html5 video 加速 html5 video player

您所在的位置:网站首页 flash player硬件加速 html5 video 加速 html5 video player

html5 video 加速 html5 video player

#html5 video 加速 html5 video player| 来源: 网络整理| 查看: 265

浅谈html5 video标签嵌入视频

前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。

这里就要谈一谈html5的video标签了。html5功能的强大是毋庸置疑的,而且作为一款为苹果量身定做的前端技术,现在html5对各浏览器的支持也越来越好,在手机端的支持也是让我觉得没有什么可以相比的。

在html5中嵌入视频非常简单,仅仅只需要如下代码就可以实现了:

          

html5标签的属性:

 

 

autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。height pixels 设置视频播放器的高度。loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。muted muted 规定视频的音频输出应该被静音。poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。src url 要播放的视频的 URL。width pixels 设置视频播放器的宽度。

 

本人觉得videojs是一个很不错的选择,下面就介绍下这个播放器的使用。

第一步:在官网下载video.js和video-js.css以及video-js.swf

第二步:在head标签引入

[html] view plain copy

第三步:body里加入video标签

您的浏览器不支持 video 标签。

在这里还要多说一点,可能是技术发展的原因,各种浏览器对这三种格式的支持没有那么绝对了,比如:mp4格式的视频,在谷歌,搜狗,火狐,手机端等都可以正常播放,其他两种格式大致也是这种情况。而且,video标签对视频格式的支持好像也没有那么绝对了,至少我放入wmv,avi格式的视频也是可以播放的,感兴趣的同学可以试试啦,这里我就不多讲了。在这里要重点强调的一点是视频的准备,我们准备mp4,ogv,webm格式的视频,可能会遇见明明是mp4格式的视频,为什么不能播放呢?而且用一些转码软件转码视频给mp4,ogv,webm格式的视频也是无法播放,这里可能是转码的问题,比如:mp4要求是h246,可是按照要求转码后,可能还是无法播放。这里给各位大侠推荐一款视频转换软件,专门为html5量身定做的:Freemake Video Converter。直接转码为html5视频,就会转换给MP4,ogv.webm三种格式的视频,并且会生成相应的代码。

 

第四步:js

_V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";

加入这段代码,就可以在不支持的浏览器自动切换为flash播放。

 

最后,在服务器部署后,会发现视频可能无法播放,这是因为IIS里我们没有配置mime类型的支持,把mp4,ogv,webm这三种格式的支持都配置好了,视频就可以正常播放了。

至于如何配置,百度搜索一下就知道了,有很多的,而且最好配置的文件类型要符合相应的格式,但我试了一下,发觉文件类型没有什么影响...如果配置后,还是无法播放,那么可能就是文件类型不对,具体看情况而定吧。

 

 

 

 

 

 

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3